<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初心主页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./dist/swiper.css">
    <script src="./dist/swiper.js"></script>
</head>

<body>
    <div class="homepage ">
        <!-- header 头部开始 -->
        <div class="header w">
            <div class="header-t w">
                <div class="header-l"><img src="./images/logo.png" alt=""></div>
                <div class="header-c">
                    <ul class="clearfix">
                        <li class="ht">
                            <a href="#">首页</a>
                        </li>
                        <li class="ht">
                            <a href="#">找工作</a>
                        </li>
                        <li class="ht">
                            <a href="#">超神学院</a>
                        </li>
                        <li class="ht">
                            <a href="#">最新活动</a>
                        </li>
                        <li class="ht">
                            <a href="#">关于我们</a>
                        </li>
                    </ul>
                </div>
                <div class="header-r">
                    <ul class="clearfix">
                        <li class="ht"><a href="#">登录</a></li>
                        <li class="ht"><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- header 头部结束 -->
        <!-- center 主体部分开始 -->
        <div class="center w">
            <div class="center-l">
                <div class="banner">
                    <!-- 轮播图 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./images/banner/banner1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner/banner2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner/banner3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner/banner4.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner/banner5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner/banner7.jpg" alt=""></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <!-- 如果需要滚动条 -->
                        <!-- <div class="swiper-scrollbar"></div> -->
                    </div>
                    <!-- 轮播图 -->
                </div>
                <!-- 左边下面 -->
                <div class="banner-bottom">
                    <ul class="clearfix">
                        <li><a href="#">推荐</a></li>
                        <li><a href="#">前端</a></li>
                        <li><a href="#">小程序</a></li>
                        <li><a href="#">Vue</a></li>
                        <li><a href="#">开发工具</a></li>
                        <li><a href="#">面试</a></li>
                    </ul>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                    <div class="news">
                        <p><span class="iconfont">&#xe62f;</span>
                            <span>天外飞仙</span>
                            <span>1小时前</span></p>
                        <p>router页面跳转，怎么避免重复打开标签</p>
                    </div>
                </div>
            </div>
            <div class="center-r">
                <div class="publish">
                    <a href="#">发布文章</a>
                </div>
                <!-- 开班动态 -->
                <div class="dynamic">
                    <div>
                        <h2>开班动态</h2>
                    </div>
                    <p>高级前端全栈04期 <span>2019-10-10</span></p>
                    <p>高级前端全栈05期 <span>2019-10-10</span></p>
                    <p>高级前端全栈06期 <span>2019-10-10</span></p>
                    <p>高级前端全栈07期 <span>2019-10-10</span></p>
                    <p>高级前端全栈08期 <span>2019-10-10</span></p>
                </div>
                <!-- 最新动态 -->
                <div class="dynamic">
                    <div>
                        <h2>最新动态</h2>
                    </div>
                    <p>毕业学员找工作经验分享</p>
                    <p>高薪秘诀都在这里</p>
                    <p>最详细的前端面试解答题</p>
                    <p>上班第一天应该做那些事</p>
                    <p>技术学习的方法和认知</p>
                </div>
                <!-- 联系我们 -->
                <div class="dynamic">
                    <div>
                        <h2>联系我们</h2>
                    </div>
                    <p>微信号：gzx2550</p>
                    <p>QQ号：2550950527</p>
                    <p>联系地址：武汉市江夏区关南园一路当代梦工厂</p>
                </div>
                <!-- center 主体部分结束 -->
            </div>
</body>

</html>
<script src="./dist/jquery-3.4.0.min.js"></script>
<script src="./dist/fetch-jsonp.js"></script>
<script src="./dist/art-template.js"></script>
<script type="text/html" id="tmp">
    {{each data.data item k}}
    <div class="swiper-slide"><img src="{{item.imgUrl}}" alt=""></div> {{/each}}
</script>
<script>
    // 头部a
    $('.ht a').mouseenter(function() {
        $(this).css({
            color: '#ffd04b',
            borderBottom: '1px solid #ffd04b'
        }).siblings().css({
            color: '#fff'
        })
    });
    $('.ht a').mouseleave(function() {
        $(this).css({
            color: '#fff',
            borderBottom: '1px solid #24292e'
        })
    });
    // 中部a
    $('.banner-bottom a').mousedown(function() {
        $(this).css({
            color: '#409eff',
            fontSize: '16px'
        }).siblings().css({
            color: '#000'
        })
    });
    $('.banner-bottom a').mouseup(function() {
            $(this).css({
                color: '#000',
                fontSize: '14px'
            })
        })
        //banner 轮播图
    $('.swiper-container').mouseenter(function() {
        $('.swiper-button-prev,.swiper-button-next').css({
            display: 'block'
        })
    });
    $('.swiper-container').mouseleave(function() {
            $('.swiper-button-prev,.swiper-button-next').css({
                display: 'none'
            })
        })
        //发布文章
    $('.publish a').mouseenter(function() {
        $(this).css({
            backgroundColor: '#5eadfe'
        })
    });
    $('.publish a').mouseleave(function() {
        $(this).css({
            backgroundColor: '#47a1fd'
        })
    });
    //
    // 轮播图
    function swiper() {
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true //按钮点击播放
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 2000, //2秒切换一次
            },
        })
    };
    //获取轮播图
    // http://192.168.1.26:3000/api/admin/banners
    function myAjax(obj) { //用new promise封装一个获取数据函数
        return new Promise(function(resolve, reject) {
            $.ajax({
                type: obj.type || 'get',
                url: obj.url || 'http://192.168.1.26:3000/api/admin/login',
                dataType: obj.dataType || 'json', //注意jsonp,调用时，如果没有dataType就需要改成json
                data: obj.data || {},
                success: function(rows) {
                    resolve(rows)
                        // console.log(rows)  //打印出来，查看是否封装成功
                }
            })
        })
    };
    myAjax({
            url: 'http://192.168.1.26:3000/api/admin/banners'
        }).then(data => {
            console.log(data)
            var html = template('tmp', {
                data: data
            })
            $('.swiper-wrapper').html(html)
            swiper();
        })
        //前面函数封装，可以直接拿到轮播图数据
        //然后引入tenplate
</script>